<template>
  <div class="search">
    <form class="form" action="/">
      <van-icon name="arrow-left" @click="index" />
      <van-search style="width:300px; margin-left:20px;"
        v-model="value"
      />
      <button>搜索</button>
    </form>
    <!-- 热门搜索 -->
    <div class="hot">
        <p>热门搜索</p>
        <div class="hots">
        <div>Axon 40</div>
        <div>Z40 Pro</div>
        <div>Axon 30</div>
        <div>耳机</div>
        <div>路由器</div>
        <div>努比亚</div>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Toast, Icon } from "vant";

Vue.use(Search);
Vue.use(Toast);
Vue.use(Icon);

export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    index() {
      this.$router.push("/index");
    },
  }
}
</script>

<style lang="scss" scoped>

.van-search__content{
    border-radius: 50px;
}
.form{
    background: #fff;
}
.van-icon {
  position: absolute;
  left: 7px;
  top: 21px;
  color: #c8192e;
  font-weight: 900;
}
button{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    background: #fff;
    color: #a1a1a1;
    border: .02133rem solid #f5f5f5;
    box-shadow: 0 0.08533rem 0.17067rem 0 rgb(0 0 0 / 20%);
    position: absolute;
    right: 10px;
    top: 12px;
}
.hot{
    width: 375px;
    height: 148px;
    margin-top: 20px;
    background: #fff;
    >p{
        font-size: 13px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 20px;
        color: #666;
    }
  
    .hots{
        display: flex;
        flex-wrap: wrap;
  >div{
        font-size: 13px;
        width: 83px;
        height: 30px;
        border-radius: 50px;
        background: #f2f2f2;
        text-align: center;
        line-height: 30px;
        margin-top: 8px;
        margin-left: 15px;
        color: #666;
    }
    }
}
</style>
